<template>
  <div class="wrapper">
    <el-row type="flex" justify="center">
      <el-col :span="14">
        <el-form :inline="true"> </el-form>
        <div id="codeEditBox"></div>
        <el-button @click="handleCode">点击运行</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as monaco from "monaco-editor";
import { ref, toRaw } from "vue";
import $ from "jquery";
import { pythonCompletion } from "@/utils/completion";

export default {
  setup() {
    const editor = ref(null);
    const editorTheme = ref("vs-dark");
    const language = ref("java");
    const initEditor = () => {
      // 初始化编辑器，确保dom已经渲染
      editor.value = monaco.editor.create(
        document.getElementById("codeEditBox"),
        {
          value: "", //编辑器初始显示文字
          language: language.value, //语言支持自行查阅demo
          theme: editorTheme.value, //官方自带三种主题vs, hc-black, or vs-dark
          selectOnLineNumbers: true, //显示行号
          roundedSelection: false,
          readOnly: false, // 只读
          cursorStyle: "line", //光标样式
          automaticLayout: true, //自动布局
          glyphMargin: true, //字形边缘
          useTabStops: false,
          fontSize: 15, //字体大小
          autoIndent: true, //自动布局
          quickSuggestionsDelay: 100, //代码提示延时
        }
      );

      // 监听值的变化
      editor.value.onDidChangeModelContent((val) => {});

      // 创建代码提醒
      pythonCompletion;
    };
    $(document).ready(function () {
      initEditor();
    });
    const handleCode = () => {};

    return {
      editor,
      editorTheme,
      language,
      handleCode,
    };
  },
};
</script>

<style scoped>
.wrapper {
  margin: 20px auto;
}
#codeEditBox {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  height: 400px;
  padding: 0;
  overflow: hidden;
  margin-bottom: 15px;
}
</style>
